PurComponent 陷阱

默认参数为空数组[]

{this.props.items.map(i =>
    <Cell data={i} options={this.props.options || []} />
)}

若 options 为空，则会使用[]。[]每次会生成新的 Array，因此导致 Cell 每次的 props 都不一样，导致需要重绘。解决方法如下:

const default = [];
{this.props.items.map(i =>
  <Cell data={i} options={this.props.options || default} />
)}

内联函数

函数也经常作为 props 传递，由于每次需要为内联函数创建一个新的实例，所以每次 function 都会指向不同的内存地址。比如：

render() {
     <MyInput onChange={e => this.props.update(e.target.value)} />;
}

以及：

update(e) {
     this.props.update(e.target.value);
}
render() {
     return <MyInput onChange={this.update.bind(this)} />;
}

注意第二个例子也会导致创建新的函数实例。为了解决这个问题，需要提前绑定 this 指针：

constructor(props) {
    super(props);
    this.update = this.update.bind(this);
  }
  update(e) {
    this.props.update(e.target.value);
  }
  render() {
    return <MyInput onChange={this.update} />;
  }